<template>
<div>
    <section class="content-header">
        <h1>景区列表</h1>
    </section>
    <section class="content">
        <div class="box box-primary">
            <div class="box-header">
                <i class="ion ion-clipboard"></i>
                <h3 class="box-title">景区列表</h3>
                <div class="box-tools pull-right">
                    <a class="btn btn-block btn-primary"><i class="fa fa-plus small-pr"></i>创建景区</a>
                </div>
            </div>
            <div class="box-body">
                <ul id="sortable-list" class="todo-list">
                    <li v-for="region in regions">
                        <a class="display-block" :href="region.region_href">
                        <span class="handle">
                          <i class="fa fa-ellipsis-v"></i>
                          <i class="fa fa-ellipsis-v"></i>
                        </span>
                            <img class="regions-img" :src="region.thumbnail" width="30" height="30" />
                            <span class="text"><strong>{{region.name}} </strong>{{region.company}} {{region.code}}</span>
                        </a>
                        <div class="tools">
                            <i class="fa" :class="[region.is_hot ? 'fa-star' : 'fa-star-o']" @click="regionHot(region)"></i>
                            <i class="fa" :class="[region.is_hidden ? 'fa-eye-slash' : 'fa-eye']" @click="regionHidden(region)"></i>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>
</template>

<script>
var Vue = require('vue');
var RegionsList = Vue.component('regionsList', {
    data : function(){return {regions : {}};},
    created : function () {
        // 组件创建完后获取数据，
        // 此时 data 已经被 observed 了
        this.fetchData()
    },
    /*watch: {
        // 如果路由有变化，会再次执行该方法
        '$route': 'fetchData'
    },*/
    methods: {
        fetchData:function () {
            var _this = this;
            regionsResource.getRegions().then(function(response){
                $.each(response.data, function(i,n){
                    n.region_href = '#/regionsDetail/' + n.region_id;
                    n.thumbnail = n.thumbnail + '?imageView2/2/w/30/h/30';
                });
                _this.regions = response.data;
            });
        }
    }
});
</script>